<template>
  <div class="disFlx">
    <TableMenu class="br-10" title="BI大屏管理" :menuList="menuList" :selectKey="menuKey" @change="handleChange" />

    <div style="flex:1;overflow-x: auto;">
      <div v-if="menuKey === 'dataDisplay'">
        <dataDisplay ref="dataDisplay" />
      </div>
      <div v-else-if="menuKey === 'baseService'">
        <base-service ref="baseService" />
      </div>
      <div v-else-if="menuKey === 'elegant'">
        <elegant ref="elegant" />
      </div>
      <div v-if="menuKey === 'memberActivities'">
        <memberActivities ref="memberActivities" />
      </div>
      <div v-if="menuKey === 'joinRule'">
        <joinRule ref="joinRule" />
      </div>
      <div v-if="menuKey === 'thinkTank'">
        <ThinkTank ref="thinkTank" />
      </div>
      <div v-if="menuKey === 'mission'">
        <Mission ref="mission" />
      </div>
    </div>
  </div>
</template>
<script>
import TableMenu from '@/components/TableMenu';
import dataDisplay from './dataDisplay'
import vision from './modules/vision'
import baseService from './modules/baseService'
import elegant from './modules/elegant'
import memberActivities from './modules/memberActivities'
import joinRule from './modules/joinRule'
import ThinkTank from './thinkTank/thinkTankList.vue'
import Mission from './mission'
import { mapGetters } from 'vuex'
import { checkPermission } from '@/utils/authority'

export default {
  name: 'Detail',
  components: {
    TableMenu,
    dataDisplay,
    vision,
    baseService,
    elegant,
    memberActivities,
    joinRule,
    ThinkTank,
    Mission,
  },
  computed: {
    ...mapGetters(['headquartersSetting']),
  },
  created() {
    if(checkPermission('web:BI:dataDisplay')){
      this.menuList.push({
        name: '会员数据展示',
        key: 'dataDisplay',
      })
    }
    if (checkPermission('web:BI:baseService')) {
      this.menuList.push({
        name: '服务板块',
        key: 'baseService',
      })
    }
    if (checkPermission('web:BI:elegant')) {
      this.menuList.push({
        name: '风采展示',
        key: 'elegant',
      })
    }
    if (checkPermission('web:BI:memberActivities')) {
      this.menuList.push({
        name: '会员活动中心',
        key: 'memberActivities',
      })
    }
    if (checkPermission('web:BI:joinRule')) {
      this.menuList.push({
        name: '入会准则',
        key: 'joinRule',
      })
    }
    if (checkPermission('web:BI:thinkTank')) {
      this.menuList.push({
        name: '人才智库',
        key: 'thinkTank',
      })
    }
    if (checkPermission('web:BI:mission')) {
      this.menuList.push({
        name: '使命宗旨',
        key: 'mission',
      })
    }
    this.menuKey = this.headquartersSetting || this.menuList[0].key;
  },
  data() {
    return {
      menuList: [],
      menuKey: '',
    }
  },
  methods: {
    handleChange(e) {
      this.menuKey = e;
      this.$store.commit('SET_HEADQUARTERSSETTING', e)
    },
  },
}
</script>
<style lang="less" scoped>
</style>
